<template>
  <!-- 头 -->
  <div class="head-class">
    <div class="first-class">
      <h3 class="first-h3-class">项目代码智能分析系统</h3>
    </div>

    <div class="after-class">
      <div v-if="!isLogin">
        <a-button type="primary" @click="open = true">登录</a-button>
      </div>
      <span class="flex-class" v-else>
     <img class="avatar-class"
          src="https://img.jsdesign2.com/assets/img/654464776ad717a6c9b7bb85.png#b24b841c429faa39abbbdf4389de0f7c"></img>
     <div class="menu-class">
       <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21" height="18"
            viewBox="0 0 21 18" fill="none">
         <path
             d="M0 1.5C0 0.670313 0.670313 0 1.5 0L19.5 0C20.3297 0 21 0.670313 21 1.5C21 2.32969 20.3297 3 19.5 3L1.5 3C0.670313 3 0 2.32969 0 1.5ZM0 9C0 8.17031 0.670313 7.5 1.5 7.5L19.5 7.5C20.3297 7.5 21 8.17031 21 9C21 9.82969 20.3297 10.5 19.5 10.5L1.5 10.5C0.670313 10.5 0 9.82969 0 9ZM21 16.5C21 17.3297 20.3297 18 19.5 18L1.5 18C0.670313 18 0 17.3297 0 16.5C0 15.6703 0.670313 15 1.5 15L19.5 15C20.3297 15 21 15.6703 21 16.5Z"
             fill="#1D2129">
         </path>
       </svg>
     </div>
      </span>
    </div>
  </div>
  <!-- 组件 -->
  <a-modal v-model:open="open" title="登录/注册" @ok="handleOk" cancelText="关闭"
           :okText="activeKey=== 'login' ? '登录': '注册'" :maskClosable="false">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="login" tab="登录">
        <login/>
      </a-tab-pane>
      <a-tab-pane key="register" tab="注册" force-render>
        <register ref="registerRef"/>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script setup>
import {ref, defineAsyncComponent} from 'vue';
import {useLogin} from '@/hooks/login.js';
import {enroll} from '@/api/user.js'
import {message} from "ant-design-vue";

const {isLogin, updateLogin} = useLogin()
const Register = defineAsyncComponent(() => import('@/components/register.vue'))
const Login = defineAsyncComponent(() => import('@/components/login.vue'))
const registerRef = ref()
const open = ref(false)
const activeKey = ref('login')

const handleOk = () => {
  const {formRef, codeStr} = registerRef.value
  console.log(registerRef.value, 'registerRef.value')
  formRef.validate()
      .then((res) => {
        return enroll({...res, avatar: res.avatar[0].response.data.fileName, codeStr: codeStr.imgStr});
      }).then(({data}, code) => {
    if (code !== 200) {
      message.error(data.message)
    } else {
      message.success(data.message)
    }
  })
      .catch(error => {
        console.log('error', error);
      });
}

const loginStatus = () => {
  localStorage.setItem('token', '我喜欢你')
  updateLogin()
}
</script>

<style lang="scss" scoped>
.head-class {
  width: 90%;
  margin-left: 5%;
  height: 72px;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.first-class {

}

.after-class {
  display: flex;
  align-items: center;
}

.first-h3-class {
  left: 3px;
  top: 6px;
  width: 220px;
  height: 36px;
  opacity: 1;
  /** 文本1 */
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 35.07px;
  color: rgba(29, 33, 41, 1);
  text-align: left;
  vertical-align: middle;

}

.menu-class {
  left: 20px;
  position: relative;
}

.avatar-class {
  width: 40px;
  height: 40px;
  background-size: 100%;
  border-radius: 50%;
  position: relative;
  left: 10px;

}

.flex-class {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
